<!--  -->
<template>
  <div>
    水泵管理
    <div
      style="width:600px;height:100%;margin-right:20px;display:"
      v-for="(item, index) in arraylist"
    >
      <el-button type="text" @click="showRecord(item)"
        >点击打开 {{ item }}</el-button
      >
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div
        style="width:600px;height:100%;margin-right:20px;display:"
        v-for="(item, index) in arraylist"
        v-if="item == successData"
      >
        {{ "当前的弹窗ID：" + item }} {{ successData }}
        <div
          :id="`my_` + item"
          :style="{ width: '530px', height: '280px' }"
        ></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件、工具js、)
//例如：import 组件名 from '组件路径'
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {
      dialogVisible: false,
      arraylist: ["myChart", "myChart2", "myChart3", "myChart4"],
      successData: "",
      arrayDate: [
        {
          myChart: [5, 20, 36, 10, 10, 20]
        },
        {
          myChart2: [15, 20, 16, 10, 20, 20]
        },
        {
          myChart3: [15, 10, 16, 20, 10, 20]
        }
      ]
    };
  },

  components: {},

  computed: {},

  mounted() {
    // this.open();
    this.dialogShow();
    // this.xxx();
  },

  methods: {
    showRecord(item) {
      // console.log(item);
      this.successData = item;
      var _this = this;
      this.dialogVisible = true;
      setTimeout(function() {
        _this.dialogShow(item);
      }, 200);
    },
    // dialogShow(row) {
    //   for (let i = 0; i < this.tableData.length; i++) {
    //     if (row.name == this.tableData[i].name) {
    //       let chart_cl_detail_evaluate = echarts.init(
    //         document.getElementById("chart_cl_detail_evaluate" + i),
    //         "macarons"
    //       );
    //       chart_cl_detail_evaluate.setOption({});
    //     }
    //   }
    // },
    dialogShow(item) {
      for (let i = 0; i < this.arraylist.length; i++) {
        if (item == this.arraylist[i]) {
          console.log("打印", this.arraylist[i]);
          let data = null;
          if (item == "myChart") {
            data = [5, 20, 36, 10, 10, 15];
          } else if (item == "myChart2") {
            data = [15, 20, 16, 10, 20, 19];
          } else if (item == "myChart3") {
            data = [15, 10, 16, 20, 10, 9];
          } else if (item == "myChart4") {
            data = [9, 20, 12, 15, 14, 18];
          }
          let myChart = this.$echarts.init(
            document.getElementById("my_" + this.arraylist[i])
          );

          // document.getElementById("item" + item)
          // 绘制图表
          myChart.setOption({
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: data
              }
            ]
          });
        }
        // this.dialogVisible = true;
      }

      // console.log("手动阀手动阀", "my_" + i);

      // let myChart = this.$echarts.init(document.getElementById("myChart"));
      // // 绘制图表
      // myChart.setOption({
      //   title: {
      //     text: "今日数据",
      //     subtext: "设备IP"
      //   },
      //   tooltip: {
      //     trigger: "axis"
      //   },
      //   legend: {
      //     data: ["今日剩余电流", "昨日剩余电流"]
      //   },
      //   toolbox: {
      //     show: true,
      //     feature: {
      //       mark: { show: true },
      //       dataView: { show: true, readOnly: false },
      //       magicType: { show: true, type: ["line", "bar"] },
      //       restore: { show: true },
      //       saveAsImage: { show: true }
      //     }
      //   },
      //   calculable: true,
      //   xAxis: [
      //     {
      //       type: "category",
      //       boundaryGap: false,
      //       data: [
      //         "12:00",
      //         "13:00",
      //         "14:00",
      //         "15:00",
      //         "16:00",
      //         "17:00",
      //         "18:00",
      //         "19:00",
      //         "20:00",
      //         "21:00",
      //         "22:00"
      //       ]
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       axisLabel: {
      //         formatter: "{value} A"
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       name: "今日剩余电流",
      //       type: "line",
      //       data: [644, 987, 135, 486, 948, 498, 356, 268, 186, 848, 168],
      //       markPoint: {
      //         data: [
      //           { type: "max", name: "最大值" },
      //           { type: "min", name: "最小值" }
      //         ]
      //       },
      //       markLine: {
      //         data: [{ type: "average", name: "平均值" }]
      //       }
      //     },
      //     {
      //       name: "昨日剩余电流",
      //       type: "line",
      //       data: [125, 555, 444, 333, 999, 888, 222, 444, 555, 888, 150],
      //       markPoint: {
      //         data: [{ name: "日最低", value: -2, xAxis: 1, yAxis: -1.5 }]
      //       },
      //       markLine: {
      //         data: [{ type: "average", name: "平均值" }]
      //       }
      //     }
      //   ]
      // });
    },
    resetForm() {
      this.newDialogFormVisible = false;
    },
    handleClose() {
      this.resetForm();
    },
    // 创建方法
    initEcharts() {},
    open() {
      // this.$nextTick(() => {
      //   //  执行echarts方法
      //   this.initEcharts();
      // });
      // alert(111);
      // this.$nextTick(() => {
      //   this.drawLine();
      // });
    }
  }
  //生命周期 - 创建完成（可以访问当前this实例）
  // created() {}
};
</script>
<style scoped></style>
